<template>
    <div class="classlesson">
        <el-form ref="ruleFormRef" :model="classRuleForm" label-width="auto" status-icon>
            <el-row>
                <el-col :span="4">
                    <el-form-item label="专业分类" prop="major_id">
                        <el-select  :empty-values="[null, undefined]" v-model="classRuleForm.major_id" placeholder="请选择专业">
                            <el-option v-for="item in majorListData" :label="item.name" :value="item.id" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="班课名称" prop="name">
                        <el-input v-model.trim="classRuleForm.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="授课老师" prop="teacher_name">
                        <el-input v-model.trim="classRuleForm.teacher_name" />
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label="创建时间" prop="createTime">
                        <el-date-picker v-model="classRuleForm.createTime" type="daterange" start-placeholder="开始日期"
                            end-placeholder="结束日期"  :disabled-date="disableFutureDates" 
                            :default-value="[new Date(year,month-1,1), new Date()]" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item>
                        <el-button :icon="Search" type="primary" @click="onSearch">
                            搜索
                        </el-button>
                        <el-button :icon="Refresh" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-col>

            </el-row>
        </el-form>

      
        <div class='listmain' v-if='classArr.length'>
            <div class='item' v-for='item in classArr' :key='item'>
                <BanListItem @addSuccess='addSuccess' :item='item'></BanListItem>
            </div>
        </div>
        <el-empty style="display: flex; height: 65vh; justify-content: center; align-items: center;" v-else description='老师暂未创建班课~~' :image-size="200"/>

        <!-- 分页查询 -->
        <div class='pagelist'>
            <el-pagination hide-on-single-page :current-page='classRuleForm.page_num' @current-change='currentChange'
                background layout='prev, pager, next' :total='pageTotal' :page-size='classRuleForm.page_size' />
        </div>

    </div>
</template>

<script setup>
import { ref } from "vue"
import { Plus, Search, Refresh } from '@element-plus/icons-vue'
import BanListItem from '@/components/BanListItem/index.vue';

import { SclassArrData } from '@/api/banke/class';
import { majorList } from "@/api/banji/classadmin.js"
import useUserStore from '@/store/modules/user'
import { ElMessage } from 'element-plus';
const store = useUserStore()
const dialogVisible = ref(false)
const majorListData = ref([])
const pageTotal=ref()
const year=ref(new Date().getFullYear())
const month=ref(new Date().getMonth())
// 定义一个方法来计算并返回是否应禁用某日期
const disableFutureDates = (time) => {
  const now = new Date(); // 获取当前时间
  return time && time > now; // 如果time大于当前时间，则返回true，表示该日期应被禁用
};
const { proxy } = getCurrentInstance()
// 班课列表参数
const classRuleForm = ref({
    page_size:"12",
    page_num:"1",
    major_id: "",
    name: "",
    teacher_name: "",
    createTime: ""
})


// 添加屏幕宽度监听
const updatePageSize = () => {
    const width = window.innerWidth
    if (width < 1700 &&width > 1600) {
        classRuleForm.value.page_size = 10
    } else {
        classRuleForm.value.page_size = 12
    }
    getClassList();
}
// 监听窗口大小变化
onMounted(() => {
    // updatePageSize()
    // window.addEventListener('resize', updatePageSize)
})


//切换页面时候触发时间
const currentChange = (e) => {
    classRuleForm.value.page_num = e;
    getClassList();
};

// 专业列表
const majorData = () => {
    majorList().then(res => {
        majorListData.value = res
        majorListData.value.unshift({id:"",name:"全部"})
    })
}



// 班课列表
const classArr = ref([])
// 获取所有班课列表数据
const getClassList = () => {
    if (classRuleForm.value.createTime) {
        let timeArr = []
        classRuleForm.value.createTime.forEach(e => {
            let time = new Date(e).getTime()
            e = time
            timeArr.push(e)
        })
        classRuleForm.value.createTime = timeArr
    }

    let options={
        page_size:classRuleForm.value.page_size,
        page_num:classRuleForm.value.page_num,
        name:classRuleForm.value.name?classRuleForm.value.name:null,
        start_time:classRuleForm.value.createTime?classRuleForm.value.createTime[0].toString():null,
        end_time:classRuleForm.value.createTime?classRuleForm.value.createTime[1].toString():null,
        marjor_id:classRuleForm.value.major_id?classRuleForm.value.major_id:null,
        teacher_name:classRuleForm.value.teacher_name?classRuleForm.value.teacher_name:null,
        is_material: false,
        saas_id:useUserStore().roles[0].parent_id,
        only_for_me:true
    }

    SclassArrData(options).then(res => {
        console.log(options);  
        pageTotal.value=res.total_count
        if(res.list){
            classArr.value = res.list
            
            return
        }
        ElMessage.error("找不到该班课")
       
    })
}

// 搜索班课
const onSearch = () => {
    classRuleForm.value.page_num= 1;
    getClassList()
}

// 重置表单
const resetForm = () => {
    proxy.$refs.ruleFormRef.resetFields();
    getClassList()
}


// 新增班课
const addBanClass = () => {
    dialogVisible.value = true;
}

// 新增班课成功之后的回调
const addSuccess = () => {
    dialogVisible.value = false
    getClassList()

}


// 子组件点击取消返回的事件
const addEvent = () => {
    dialogVisible.value = false

};




majorData()
getClassList()

</script>

<style lang="scss" scoped>
.classlesson {
    margin-top: 30px;
   
    .el-form-item {
        margin-right: 15px;
    }
}

.listmain {
    padding: 25px;
    padding-top: 20px;
    display: grid;
    grid-gap: 18px;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

    .item {
        
        display: inline-block;
        background: transparent;
        border-radius: 9px;
        position: relative;
        padding: 6px 6px 0 6px;
        transition: 0.3s;
    }

    .item:hover {
        background: #EFEFEF;
    }

}
</style>